﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/new.css" />

<script type="text/javascript">
function loaded() {
	document.login.j_username.focus();
	document.login.onsubmit = function() {
		var user = document.login.j_username.value;
		var psw = document.login.j_password.value;
		if(user==''){
			document.getElementById("loginmess").innerHTML = "账号不能为空！";
			document.login.j_username.focus();
			return false;
		}
		if(user.length > 20) {
			document.getElementById("loginmess").innerHTML = "账号字数不能超过20个！";
			document.login.j_username.focus();
			return false;
		}
		if(psw==''){
			document.getElementById("loginmess").innerHTML = "密码不能为空！";
			document.login.j_password.focus();
			return false;
		}
		if(psw.length > 32){
			document.getElementById("loginmess").innerHTML = "密码字数不能超过32个！";
			document.login.j_password.focus();
			return false;
		}
		document.getElementById("loginmess").innerHTML = "登录中...";
		document.cookie = "lastaccount=" + escape(user);
		return true;
	};
	var url = location.href;
	var error = url.substring(url.indexOf("json=") + 5);
	if(error == "error") {
		document.getElementById("loginmess").innerHTML = "账号或密码错误！";
	} else if(error == "invalid") {
		document.getElementById("loginmess").innerHTML = "登录超时，请重新登录！";
	} else if(error == "expired") {
		document.getElementById("loginmess").innerHTML = "登录被弹出，请重新登录！";
	}
	var arrStr = document.cookie.split(";");
	for(var i=0; i<arrStr.length; i++) {
		var temp = arrStr[i].split("=");
		if(temp[0] == "lastaccount") {
			document.login.j_username.value = unescape(temp[1]);
			document.login.j_password.focus();
		}
	}
}

	var interval;
	/**
	 * 输入框得到焦点，转换边框样式和提示信息
	 * type 0-去除 1-添加
	 * domId 输入框id 0-nameInput 1-passInput
	 */
	function toggle(type, domId) {
		if (type == 1) {
			interval = setInterval(function() {
				inputKeyup(0);
				inputKeyup(1);
			}, 100);
		} else {
			clearInterval(interval);
		}
		var targetId;
		if (domId == 0) {
			targetId = [ "nameInput", "namePrompt" ];
		} else {
			targetId = [ "passInput", "passPrompt" ];
		}
		document.getElementById(targetId[0]).className = "formIpt inputLine"
				+ (type == 0 ? "" : " inputIn");
		document.getElementById(targetId[1]).className = "loginPrompt"
				+ (type == 0 ? "" : " inputOn");
	}
	/**
	 * 输入框改变时的动作
	 * domId 输入框id 0-namePrompt 1-passPrompt
	 */
	function inputKeyup(domId) {
		var targetId;
		if (domId == 0) {
			targetId = [ document.login.j_username.value, "namePrompt", "请输入账号" ];
		} else {
			targetId = [ document.login.j_password.value, "passPrompt", "密码" ];
		}
		if (targetId[0] == null || targetId[0] == "") {
			document.getElementById(targetId[1]).innerHTML = targetId[2];
		} else {
			document.getElementById(targetId[1]).innerHTML = "";
		}
	}
</script>

<title>Platypus-登录</title>
</head>
<body onload="loaded()">
<div class="new_header"></div>
<div class="head_line"></div>
<div class="login_bg">
<div class="login_content">
  <div class="login">
   	  <img src="images/welcome.png" style="margin-bottom:20px;" />
      <form name="login" action="j_spring_security_check" method="post" class="loginform">
			<div id="nameInput" class="formIpt inputLine">
				<input id="username" name="j_username" type="text" class="inputtext" onblur="toggle(0,0)" onfocus="toggle(1,0)" />
				<label id="namePrompt" for="username" class="loginPrompt">请输入账号</label>
			</div>
			<div style="height: 16px;"></div>
			<div id="passInput" class="formIpt inputLine">
				<input id="password" name="j_password" type="password" class="inputtext" onblur="toggle(0,1)" onfocus="toggle(1,1)" />
				<label id="passPrompt" for="password" class="loginPrompt">密码</label>
			</div>
			<div style="height: 10px;"></div>
			<div class="formIpt">
				<input id="rememberMe" name="_spring_security_remember_me" type="checkbox" style="vertical-align: middle; border-color:#999" />
				<label for="rememberMe" style="font-size: 12px; color:#8e8e8e">记住密码</label>
				<span id="loginmess" style="padding-left: 5px;font-size: 12px;color: #FF4340;"></span>
			</div>
			<div class="formIpt">
				<input type="submit" class="login_btn submit" value="登录" />
				<input type="reset" class="login_btn2 reset" value="重置" />
			</div>
		</form>
  </div>	
</div>
</div>
<div class="login_footer">Copyright © 2012 OneCloud Co., Ltd.    粤ICP备12047346号   增值电信业务经营许可证 粤B2-20120402</div>
</body>
</html>